<template>
  <div>
    当前用户：{{ user.username }}
    <el-button @click="logout" type="info">logout</el-button>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="编号" prop="cono">
        <el-input v-model="form.cono" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="合作类型" prop="cotype">
        <el-radio-group v-model="form.cotype">
          <el-radio :label="1">销售</el-radio>
          <el-radio :label="2">采购</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="网址" prop="courl">
        <el-input type="url" v-model="form.courl" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="营业范围" prop="coscope">
        <el-select v-model="form.coscope" placeholder="营业范围">
          <el-option v-for="scope in scopes" :key="scope.id" :label="scope.name" :value="scope.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="合作时间" prop="costart">
        <el-date-picker v-model="form.costart" style="width: 200px;"></el-date-picker>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="所属大区" prop="coarea">
        <el-select v-model="form.coarea" placeholder="所属大区">
          <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电话" prop="telphone">
        <el-input v-model="form.telphone" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/file/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.img" :src="form.img" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SaveView',
  data () {
    return {
      // 登录信息
      user: {
        username: ''
      },
      form: {
        cono: '',
        name: '',
        cotype: null,
        courl: '',
        coscope: null,
        costart: '',
        coarea: null,
        email: '',
        telphone: '',
        img: ''
      },
      scopes: [],
      areas: [],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        cono: [
          { required: true, message: '请输入编号', trigger: 'blur' }
        ],
        cotype: [
          { required: true, message: '请选择合作类型', trigger: 'change' }
        ],
        coscope: [
          { required: true, message: '请选择范围', trigger: 'change' }
        ],
        coarea: [
          { required: true, message: '请选择大区', trigger: 'change' }
        ],
        telphone: [
          { required: true, message: '请填写电话', trigger: 'blur' }
        ],
        costart: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请选择邮箱' },
          { type: 'email', message: '请选择合法邮箱' }
        ],
        courl: [
          { required: true, message: '请选择网址' },
          { type: 'url', message: '请选择合法网址' }
        ]
      }
    }
  },
  methods: {
    save () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.axios.post('/cop/save', this.form).then(res => {
            if (res.data.code === 200) {
              this.$message.success('ok')
              this.$router.push('/list')
            } else if (res.data.code === 909) {
              this.$message.error('匿名用户不能提交')
            } else if (res.data.code === 908) {
              this.$message.error('只有管理员才能提交')
            } else {
              this.$message.error('no')
            }
          })
        } else {
          this.$message.error('信息不完整')
          return false
        }
      })
    },
    logout () {
      this.$store.commit('setUser', {})
      this.$router.push('/login')
    },
    // =============================== 图片上传
    handleAvatarSuccess (res, file) {
      this.form.img = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
    // =============================== 图片上传
  },
  created () {
    this.user = this.$store.state.user
    this.axios.get('/dic/dicList', { params: { type: 1 } }).then(res => {
      this.scopes = res.data.jdata
    })
    this.axios.get('/dic/dicList', { params: { type: 2 } }).then(res => {
      this.areas = res.data.jdata
    })
  }
}
</script>

<style scoped>

</style>
